<template>
    <div class="home">
        <div class="content">
            <!-- 顶部导航栏 -->
            <div class="header">
                <div class="header-inner">
                    <div class="location-container" @click="showAddressSelector = true">
                        <van-icon name="location-o" class="location-icon" />
                        <div class="location-text">{{currentAddress ? currentAddress.name : '点击选择地址'}}</div>
                        <van-icon name="arrow" class="arrow-icon" />
                    </div>
                    <div class="right">
                        <svg class="icon" aria-hidden="true" @click="goToMessage">
                            <use xlink:href="#icon-liaotian"></use>
                        </svg>
                    </div>
                </div>

            </div>

            <!-- 地址选择器弹出层 -->
            <van-popup v-model:show="showAddressSelector" position="top" :style="{ height: '70%' }" round>
                <div class="address-selector">
                    <div class="address-header">
                        <div class="title">选择收货地址</div>
                        <div class="add-address" @click="goToAddAddress">新增地址</div>
                    </div>
                    
                    <!-- 城市选择和搜索框 -->
                    <div class="location-search-bar">
                        <div class="city-selector">
                            <van-icon name="location-o" class="location-icon" />
                            <span>泸州</span>
                            <van-icon name="arrow-down" />
                        </div>
                        <div class="search-input">
                            <van-search 
                                v-model="addressKeyword" 
                                placeholder="请输入收货地址" 
                                @search="searchAddress"
                                shape="round"
                                background="transparent"
                                :clearable="true"
                            />
                        </div>
                    </div>
                    
                    <!-- 当前定位地址 -->
                    <div class="current-location-address">
                        <div class="address-text">{{currentLocation}}</div>
                        <div class="relocate-btn" @click="getCurrentLocation">
                            <van-icon name="aim" />
                            <span>重新定位</span>
                        </div>
                    </div>
                    
                    <!-- 我的收货地址 -->
                    <div class="my-addresses-section">
                        <div class="section-title">
                            <van-icon name="contact" />
                            <span>我的收货地址</span>
                        </div>
                        
                        <div class="address-list">
                            <div 
                                v-for="(address, index) in savedAddresses" 
                                :key="index"
                                class="address-item"
                            >
                                <div class="address-content" @click="setCurrentAddress(address)">
                                    <div class="address-tag" v-if="address.tag">{{address.tag}}</div>
                                    <div class="address-name">{{address.name}}</div>
                                    <div class="address-user">
                                        <span class="user-name">{{address.contact}} {{address.gender || '先生'}}</span>
                                        <span class="user-phone">{{address.phone}}</span>
                                    </div>
                                </div>
                                <div class="address-actions">
                                    <div class="delete-btn" @click="deleteAddress(index)">
                                        <van-icon name="delete" />
                                    </div>
                                </div>
                            </div>
                            
                            <div class="show-more-btn" @click="showMoreAddresses" v-if="hasMoreAddresses">
                                展开更多地址 <van-icon name="arrow-down" />
                            </div>
                        </div>
                    </div>
                    
                    <!-- 附近地址 -->
                    <div class="nearby-addresses-section">
                        <div class="section-title">
                            <van-icon name="location-o" />
                            <span>附近地址</span>
                        </div>
                        
                        <div class="address-list">
                            <div 
                                v-for="(address, index) in nearbyAddresses" 
                                :key="index"
                                class="address-item"
                                @click="setCurrentAddress(address)"
                            >
                                <div class="address-name">{{address.name}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-popup>

            <!-- 搜索框 -->
            <div class="search-box-container">
                <div class="search-box">
                    <van-search
                        v-model="searchValue"
                        shape="round"
                        background="transparent"
                        placeholder="蔡大叔炸洋芋"
                        disabled
                        @click="onClickSearch"
                    >
                        <template #right-icon>
                            <div class="search-button">搜索</div>
                        </template>
                    </van-search>
                </div>
            </div>

            <!-- 内容区域 -->
            <div class="content-container">
                <!-- 分类图标 -->
                <div class="category-wrapper">
                    <van-swipe class="category-swipe" :loop="false" :show-indicators="true" :indicator-color="'#ffe74c'" :autoplay="0">
                        <!-- 第一页 -->
                        <van-swipe-item>
                            <div class="category-icons">
                                <div class="category-item" v-for="(item, index) in categoryList.slice(0, 10)" :key="index" :class="{'first-row': index < 5}">
                                    <div class="icon-wrapper" :style="{backgroundColor: item.bgColor}">
                                        <svg class="icon" aria-hidden="true">
                                            <use :xlink:href="item.icon"></use>
                                        </svg>
                                    </div>
                                    <span>{{item.name}}</span>
                                </div>
                            </div>
                        </van-swipe-item>
                        <!-- 第二页 -->
                        <van-swipe-item>
                            <div class="category-icons">
                                <div class="category-item" v-for="(item, index) in categoryList.slice(10, 20)" :key="index+10">
                                    <div class="icon-wrapper" :style="{backgroundColor: item.bgColor}">
                                        <svg class="icon" aria-hidden="true">
                                            <use :xlink:href="item.icon"></use>
                                        </svg>
                                    </div>
                                    <span>{{item.name}}</span>
                                </div>
                            </div>
                        </van-swipe-item>
                    </van-swipe>
                </div>

                <!-- 附近商家 -->
                <div class="nearby-section">
                    <div class="section-header">
                        <div class="title-box">
                            <div class="title-text">神抢手</div>
                            <div class="subtitle">瑞幸9.9元起</div>
                        </div>
                        <div class="more">更多 <span class="arrow">></span></div>
                    </div>
                    <div class="food-list">
                        <div class="food-item" v-for="(item, index) in foodList" :key="index" @click="goToProductDetail(item)">
                            <div class="food-img">
                                <img :src="item.img" alt="food">
                            </div>
                            <div class="food-info">
                                <div class="restaurant-name">{{item.restaurant}}</div>
                                <div class="name">{{item.name}}</div>
                                <div class="price-row">
                                    <div class="discount-tag">{{item.discount}}</div>
                                    <div class="price">
                                        <span class="current">¥{{item.currentPrice}}</span>
                                        <span class="original">¥{{item.originalPrice}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 切换选项卡 -->
                <div class="tabs-container">
                    <div class="tabs">
                        <div 
                            v-for="(tab, index) in tabList" 
                            :key="index"
                            class="tab-item" 
                            :class="{'active': currentTabIndex === index}"
                            @click="changeTab(index)"
                        >
                            <div class="tab-text">{{tab.name}}</div>
                        </div>
                    </div>
                </div>

                <!-- 商家列表 -->
                <div class="merchant-list" v-if="currentTabIndex >= 0">
                    <div class="merchant-item" v-for="(item, index) in merchantList" :key="index" @click="goToProductDetail(item)">
                        <div class="quality-label" v-if="item.qualityLabel">{{item.qualityLabel}}</div>
                        <div class="merchant-img">
                            <img :src="item.img" alt="merchant">
                            <div class="live-tag" v-if="item.isLiveStreaming">直播中</div>
                        </div>
                        <div class="merchant-info">
                            <div class="merchant-name">{{item.name}}</div>
                            <div class="merchant-rating-row">
                                <div class="rating">{{item.rating}}分</div>
                                <div class="sales">月售{{item.sales}}+</div>
                                <div class="price" v-if="item.price">人均 ¥{{item.price}}</div>
                            </div>
                            <div class="delivery-info">
                                <span>起送 ¥{{item.minPrice}}</span>
                                <span>配送 约¥{{item.deliveryFee}}</span>
                                <span class="right-info">{{item.deliveryTime}}分钟</span>
                                <span class="right-info">{{item.distance}}km</span>
                            </div>
                            <div class="tags-row">
                                <div 
                                    class="tag" 
                                    v-for="(tag, tagIndex) in item.tags" 
                                    :key="tagIndex"
                                    :class="{'special-tag': tag === '商家自配' || tag === '美团快送' || tag === '美团专送'}"
                                >{{tag}}</div>
                                <div class="rank-tag" v-if="item.rank">{{item.rank}}</div>
                            </div>
                            <div class="promotion-row" v-if="item.promotion">
                                <div class="promotion-icon">神劵</div>
                                <div class="promotion-text">{{item.promotion}}</div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
        <AppFooter/>
        
  
    </div>
</template>

<script>
import AppFooter from '../../components/AppFooter.vue';
import { Dialog, Toast } from 'vant';

export default {
    components:{
        AppFooter
    },
    data() {
        return {
            searchValue: '',
            isFixed: false,
            categoryList: [
                { name: '美食', icon: '#icon-mbefengge_hanbao', bgColor: '#FFE0BB' },
                { name: '甜点饮品', icon: '#icon-dangaotianpin', bgColor: '#FFD6E0' },
                { name: '超市便利', icon: '#icon-a-083_bianlidian', bgColor: '#BFE6FF' },
                { name: '蔬菜水果', icon: '#icon-shucaishuiguo', bgColor: '#D4F2D2' },
                { name: '看病买药', icon: '#icon-quankeyiliaoke', bgColor: '#FFEDB5' },
                { name: '晚餐', icon: '#icon-wancan', bgColor: '#E3D1FF' },
                { name: '校园食堂', icon: '#icon-school', bgColor: '#FFE0BB' },
                { name: '拼好饭', icon: '#icon-icon_meituanwaimai', bgColor: '#FFE0BB' },
                { name: '明厨亮灶', icon: '#icon-mingchuliangzao-dianji', bgColor: '#FFE0BB' },
                { name: '跑腿', icon: '#icon-a-083_paotui', bgColor: '#FFE0BB' },
                { name: '天天津贴', icon: '#icon-butieshenqing', bgColor: '#FFE0BB' },
                { name: '龙虾烧烤', icon: '#icon-longxia', bgColor: '#FFD6E0' },
                { name: '送奶茶', icon: '#icon-naicha', bgColor: '#BFE6FF' },
                { name: '每日大牌', icon: '#icon-huiyuan', bgColor: '#D4F2D2' },
                { name: '面包蛋糕', icon: '#icon-tiantianquan', bgColor: '#FFEDB5' },
                { name: '鸭脖卤味', icon: '#icon-a-1f986', bgColor: '#E3D1FF' },
                { name: '每日神价', icon: '#icon-icon_flashbuy', bgColor: '#FFE0BB' },
                { name: '米粉面馆', icon: '#icon-miantiao', bgColor: '#FFE0BB' },
                { name: '浪漫鲜花', icon: '#icon-xianhua-', bgColor: '#FFE0BB' },
                { name: '全部', icon: '#icon-quanbu', bgColor: '#FFE0BB' }
            ],
            foodList: [
                {
                    restaurant: '天府烤卤',
                    name: '[天府烤卤精]',
                    img: require('@/assets/images/nearby-section1.png'),
                    currentPrice: '14',
                    originalPrice: '38.6',
                    discount: '低至3.6折'
                },
                {
                    restaurant: '乡村基',
                    name: '功夫鸡腿排一块',
                    img: require('@/assets/images/nearby-section2.png'),
                    currentPrice: '11.9',
                    originalPrice: '30',
                    discount: '低至4折'
                },
                {
                    restaurant: '华莱士',
                    name: '两堡一卷套餐',
                    img: require('@/assets/images/nearby-section3.png'),
                    currentPrice: '7.9',
                    originalPrice: '24.9',
                    discount: '低至3.2折'
                },
                {
                    restaurant: '隆江秘制猪脚饭',
                    name: '[猪脚+肥肠+菜]',
                    img: require('@/assets/images/nearby-section4.png'),
                    currentPrice: '11.9',
                    originalPrice: '44',
                    discount: '低至2.7折'
                },
                {
                    restaurant: '瑞幸咖啡',
                    name: '生椰拿铁',
                    img: require('@/assets/images/nearby-section6.png'),
                    currentPrice: '9.9',
                    originalPrice: '27',
                    discount: '低至3.7折'
                },
                {
                    restaurant: '蜜雪冰城',
                    name: '芒果冰淇淋',
                    img: require('@/assets/images/merchant-img-ticket1.png'),
                    currentPrice: '5.9',
                    originalPrice: '12',
                    discount: '限时特惠'
                },
                {
                    restaurant: '蔡大叔炸洋芋',
                    name: '特色炸洋芋+饮料',
                    img: require('@/assets/images/merchant-img-ticket2.png'),
                    currentPrice: '8.9',
                    originalPrice: '20',
                    discount: '低至4.5折'
                },
                {
                    restaurant: '周黑鸭',
                    name: '鸭脖+鸭翅+鸭舌',
                    img: require('@/assets/images/merchant-img-ticket3.png'),
                    currentPrice: '18.9',
                    originalPrice: '39.9',
                    discount: '低至4.8折'
                }
            ],
            tabList: [
                { name: '神券门店' },
                { name: '神券商家' },
                { name: '满减优惠' },
                { name: '点评高' }
            ],
            currentTabIndex: 0,
            tabMerchantLists: [
                [
                    {
                        name: '密鸡王 (泸州万象汇店)',
                        img: require('@/assets/images/nearby-section6.png'),
                        rating: 4.9,
                        sales: 1000,
                        price: 44,
                        minPrice: 20,
                        deliveryFee: 3.8,
                        deliveryTime: 48,
                        distance: 2.8,
                        tags: ['商家自配'],
                        isLiveStreaming: true,
                        qualityLabel: '品质优选',
                        badge: true,
                        rank: '江阳区卤味熟食好评榜第2名',
                        promotion: '最高膨胀20，新客再补4'
                    },
                    {
                        name: '华莱士·全鸡汉堡（莲花池店）',
                        img: require('@/assets/images/merchant-img-ticket1.png'),
                        rating: 4.8,
                        sales: 1000,
                        price: 23,
                        minPrice: 20,
                        deliveryFee: 3.8,
                        deliveryTime: 25,
                        distance: 6.3,
                        tags: ['高折扣'],
                        isLiveStreaming: true,
                        qualityLabel: '品质优选',
                        badge: true,
                        rank: '千人收藏好店',
                        promotion: '领卷1元'
                    },
                    {
                        name: '曹氏鸭脖（天誉珑城店)',
                        img: require('@/assets/images/merchant-img-ticket2.png'),
                        rating: 4.8,
                        sales: 1000,
                        price: 23,
                        minPrice: 20,
                        deliveryFee: 3.8,
                        deliveryTime: 25,
                        distance: 6.3,
                        tags: ['高折扣'],
                        isLiveStreaming: true,
                        qualityLabel: '品质优选',
                        badge: true,
                        rank: '千人收藏好店',
                        promotion: '领卷1元'
                    },
                    {
                        name: '沙县风味小吃',
                        img: require('@/assets/images/merchant-img-ticket3.png'),
                        rating: 4.8,
                        sales: 1000,
                        price: 23,
                        minPrice: 20,
                        deliveryFee: 3.8,
                        deliveryTime: 25,
                        distance: 6.3,
                        tags: ['高折扣'],
                        isLiveStreaming: true,
                        qualityLabel: '品质优选',
                        badge: true,
                        rank: '千人收藏好店',
                        promotion: '领卷1元'
                    },
                    {
                        name: '传承外婆铜锅洋芋饭(泸州店）',
                        img: require('@/assets/images/merchant-img-ticket4.png'),
                        rating: 4.8,
                        sales: 1000,
                        price: 23,
                        minPrice: 20,
                        deliveryFee: 3.8,
                        deliveryTime: 25,
                        distance: 2.3,
                        tags: ['高折扣'],
                        isLiveStreaming: true,
                        qualityLabel: '品质优选',
                        badge: true,
                        rank: '千人收藏好店',
                        promotion: '领卷1元'
                    },
                    {
                        name: '传承外婆铜锅洋芋饭(泸州店）',
                        img: require('@/assets/images/merchant-img-ticket4.png'),
                        rating: 4.8,
                        sales: 1000,
                        price: 23,
                        minPrice: 20,
                        deliveryFee: 3.8,
                        deliveryTime: 25,
                        distance: 2.3,
                        tags: ['高折扣'],
                        isLiveStreaming: true,
                        qualityLabel: '品质优选',
                        badge: true,
                        rank: '千人收藏好店',
                        promotion: '领卷1元'
                    },
                    {
                        name: '蔡大叔炸洋芋（江阳店）',
                        img: require('@/assets/images/nearby-section1.png'),
                        rating: 4.7,
                        sales: 2000,
                        price: 18,
                        minPrice: 15,
                        deliveryFee: 2.5,
                        deliveryTime: 30,
                        distance: 1.5,
                        tags: ['高折扣', '美团专送'],
                        isLiveStreaming: false,
                        qualityLabel: '品质优选',
                        badge: true,
                        rank: '泸州特色小吃榜第1名',
                        promotion: '新客立减8元'
                    },
                    {
                        name: '杨国福麻辣烫（万达店）',
                        img: require('@/assets/images/nearby-section3.png'),
                        rating: 4.6,
                        sales: 3500,
                        price: 25,
                        minPrice: 20,
                        deliveryFee: 4.0,
                        deliveryTime: 35,
                        distance: 3.2,
                        tags: ['商家自配'],
                        isLiveStreaming: true,
                        qualityLabel: '品质优选',
                        badge: true,
                        rank: '龙马潭区麻辣烫榜第3名',
                        promotion: '满30减10'
                    },
                    {
                        name: '隆江猪脚饭（江阳中路店）',
                        img: require('@/assets/images/nearby-section4.png'),
                        rating: 4.9,
                        sales: 4200,
                        price: 32,
                        minPrice: 25,
                        deliveryFee: 5.0,
                        deliveryTime: 42,
                        distance: 4.5,
                        tags: ['高折扣', '美团快送'],
                        isLiveStreaming: false,
                        qualityLabel: '品质优选',
                        badge: true,
                        rank: '泸州港式料理榜第1名',
                        promotion: '满40减15，满60减25'
                    },
                ],
                [
                    {
                        name: '必胜客 (泸州万达店)',
                        img: require('@/assets/images/nearby-section4.png'),
                        rating: 4.6,
                        sales: 5000,
                        price: 55,
                        minPrice: 30,
                        deliveryFee: 6,
                        deliveryTime: 45,
                        distance: 3.2,
                        tags: ['商家自配'],
                        promotion: '满100减15'
                    },
                    {
                        name: '星巴克 (泸州龙马店)',
                        img: require('@/assets/images/nearby-section1.png'),
                        rating: 4.9,
                        sales: 8000,
                        price: 32,
                        minPrice: 25,
                        deliveryFee: 5,
                        deliveryTime: 35,
                        distance: 1.8,
                        tags: ['美团专送'],
                        isLiveStreaming: true,
                        promotion: '满50减10'
                    },
                    {
                        name: '茶百道（江阳中路店）',
                        img: require('@/assets/images/nearby-section2.png'),
                        rating: 4.7,
                        sales: 6500,
                        price: 15,
                        minPrice: 15,
                        deliveryFee: 4,
                        deliveryTime: 30,
                        distance: 2.1,
                        tags: ['美团专送', '高折扣'],
                        isLiveStreaming: false,
                        promotion: '满20减5，满30减8'
                    },
                    {
                        name: '瑞幸咖啡（泸州广场店）',
                        img: require('@/assets/images/nearby-section6.png'),
                        rating: 4.8,
                        sales: 9800,
                        price: 22,
                        minPrice: 20,
                        deliveryFee: 4.5,
                        deliveryTime: 28,
                        distance: 1.3,
                        tags: ['美团快送'],
                        isLiveStreaming: true,
                        promotion: '新客立减9.9元'
                    },
                    {
                        name: '蜜雪冰城（步行街店）',
                        img: require('@/assets/images/merchant-img-ticket1.png'),
                        rating: 4.5,
                        sales: 12000,
                        price: 10,
                        minPrice: 10,
                        deliveryFee: 3,
                        deliveryTime: 25,
                        distance: 1.5,
                        tags: ['美团专送', '高折扣'],
                        isLiveStreaming: false,
                        promotion: '满15减3，满25减7'
                    },
                ],
                [
                    {
                        name: '肯德基 (泸州广场店)',
                        img: require('@/assets/images/nearby-section2.png'),
                        rating: 4.7,
                        sales: 9000,
                        price: 28,
                        minPrice: 20,
                        deliveryFee: 4,
                        deliveryTime: 40,
                        distance: 2.5,
                        tags: ['满减优惠'],
                        promotion: '满30减8，满60减15'
                    },
                    {
                        name: '麦当劳 (泸州步行街店)',
                        img: require('@/assets/images/nearby-section3.png'),
                        rating: 4.5,
                        sales: 7000,
                        price: 26,
                        minPrice: 15,
                        deliveryFee: 3,
                        deliveryTime: 35,
                        distance: 1.9,
                        tags: ['满减优惠'],
                        isLiveStreaming: true,
                        promotion: '满40减10，满80减20'
                    },
                    {
                        name: '九宫格火锅（万象汇店）',
                        img: require('@/assets/images/nearby-section1.png'),
                        rating: 4.6,
                        sales: 5500,
                        price: 65,
                        minPrice: 40,
                        deliveryFee: 7,
                        deliveryTime: 50,
                        distance: 3.8,
                        tags: ['满减优惠', '商家自配'],
                        isLiveStreaming: false,
                        promotion: '满100减30，满200减60'
                    },
                    {
                        name: '重庆小面（江阳店）',
                        img: require('@/assets/images/nearby-section4.png'),
                        rating: 4.8,
                        sales: 8200,
                        price: 22,
                        minPrice: 15,
                        deliveryFee: 3.5,
                        deliveryTime: 32,
                        distance: 2.2,
                        tags: ['满减优惠', '美团专送'],
                        isLiveStreaming: true,
                        promotion: '满25减8，满40减15'
                    },
                    {
                        name: '汉堡王（泸州万达店）',
                        img: require('@/assets/images/merchant-img-ticket2.png'),
                        rating: 4.4,
                        sales: 6000,
                        price: 30,
                        minPrice: 20,
                        deliveryFee: 5,
                        deliveryTime: 38,
                        distance: 3.0,
                        tags: ['满减优惠'],
                        isLiveStreaming: false,
                        promotion: '满50减15，满80减25'
                    },
                ],
                [
                    {
                        name: '海底捞 (泸州商业城店)',
                        img: require('@/assets/images/nearby-section4.png'),
                        rating: 4.9,
                        sales: 12000,
                        price: 85,
                        minPrice: 50,
                        deliveryFee: 8,
                        deliveryTime: 55,
                        distance: 3.5,
                        tags: ['点评高'],
                        promotion: '新用户立减20元'
                    },
                    {
                        name: '西贝莜面村 (泸州大润发店)',
                        img: require('@/assets/images/nearby-section1.png'),
                        rating: 4.8,
                        sales: 6000,
                        price: 58,
                        minPrice: 40,
                        deliveryFee: 6,
                        deliveryTime: 50,
                        distance: 4.0,
                        tags: ['点评高'],
                        promotion: '满100减30'
                    },
                    {
                        name: '川西坝子（江阳中路店）',
                        img: require('@/assets/images/nearby-section6.png'),
                        rating: 4.9,
                        sales: 9500,
                        price: 68,
                        minPrice: 45,
                        deliveryFee: 7,
                        deliveryTime: 48,
                        distance: 2.8,
                        tags: ['点评高', '商家自配'],
                        isLiveStreaming: true,
                        promotion: '满120减30，满200减60'
                    },
                    {
                        name: '外婆家（万象汇店）',
                        img: require('@/assets/images/merchant-img-ticket3.png'),
                        rating: 4.8,
                        sales: 7800,
                        price: 55,
                        minPrice: 35,
                        deliveryFee: 6,
                        deliveryTime: 45,
                        distance: 3.2,
                        tags: ['点评高', '美团专送'],
                        isLiveStreaming: false,
                        promotion: '满100减20，满150减40'
                    },
                    {
                        name: '小龙坎火锅（龙马潭店）',
                        img: require('@/assets/images/merchant-img-ticket4.png'),
                        rating: 4.9,
                        sales: 10500,
                        price: 78,
                        minPrice: 50,
                        deliveryFee: 8,
                        deliveryTime: 52,
                        distance: 4.5,
                        tags: ['点评高', '商家自配'],
                        isLiveStreaming: true,
                        promotion: '满150减40，满300减100'
                    },
                ]
            ],
            merchantList: [],
            showAddressSelector: false,
            currentAddress: null,
            addressKeyword: '',
            searchResults: [],
            savedAddresses: [
                {
                    tag: '学校',
                    name: '泸州职业技术学院-东门',
                    contact: '蒋',
                    phone: '19915811026',
                    gender: '先生',
                },
            ],
            currentLocation: '泸州职业技术学院-东门',
            hasMoreAddresses: true,
            nearbyAddresses: [
                { name: '泸州职业技术学院-东门' },
                { name: '泸州职业技术学院-南门' },
                { name: '泸州职业技术学院(东华校区)-4栋' },
                { name: '西南医科大学城北校区-西门' },
                { name: '泸州万象汇购物中心' },
                { name: '泸州万达广场' },
                { name: '泸州步行街' },
                { name: '龙马潭区人民医院' },
                { name: '泸州江阳中路商业街' },
                { name: '泸州高铁站' }
            ],
            showAddAddressForm: false,
            newAddress: {
                name: '',
                detail: '',
                tag: '',
                contact: '',
                gender: '先生',
                phone: ''
            },
            availableTags: [
                { label: '家', value: '家', icon: 'wap-home' },
                { label: '公司', value: '公司', icon: 'bag' },
                { label: '学校', value: '学校', icon: 'award' },
                { label: '父母家', value: '父母家', icon: 'friends' },
                { label: '其他', value: '其他', icon: 'location' }
            ]
        }
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll);
        this.merchantList = this.tabMerchantLists[0];

        // 从本地存储加载保存的地址
        const savedAddresses = localStorage.getItem('savedAddresses');
        if (savedAddresses) {
            this.savedAddresses = JSON.parse(savedAddresses);
            // 如果有默认地址，设置为当前地址
            const defaultAddress = this.savedAddresses.find(address => address.isDefault);
            if (defaultAddress) {
                this.currentAddress = defaultAddress;
            } else if (this.savedAddresses.length > 0) {
                this.currentAddress = this.savedAddresses[0];
            }
        } else {
            // 如果没有保存的地址，设置默认示例地址
            this.currentAddress = {
                name: '泸州职业技术学院(东华校区)-4栋',
                detail: '泸州市龙马潭区香林路1号',
                latitude: 28.8888,
                longitude: 105.4444,
                isDefault: true
            };
            
            // 设置示例地址数据
            this.savedAddresses = [
                {
                    tag: '学校',
                    name: '酒城文化创意美食街 往前走过桥保安亭',
                    contact: '蒋',
                    phone: '19915811026'
                },
                {
                    name: '重庆市明皓光学仪器有限公司',
                    contact: '陈',
                    phone: '17378334237'
                },
                {
                    name: '洪源宾馆 209',
                    contact: '蒋顺',
                    phone: '19915811026'
                },
                {
                    name: '恒大未来城三街区-3号楼 15楼15-12c',
                    contact: '蒋顺',
                    phone: '19915811026'
                },
                {
                    tag: '公司',
                    name: '泸州市江阳区华润万象汇3楼306',
                    contact: '王',
                    gender: '女士',
                    phone: '13598765432'
                },
                {
                    tag: '家',
                    name: '泸州市龙马潭区香林路泸职院家属区2栋',
                    contact: '李',
                    gender: '先生',
                    phone: '15887654321'
                },
                {
                    tag: '父母家',
                    name: '泸州市江阳区酒城大道三段88号',
                    contact: '张',
                    gender: '女士',
                    phone: '13912345678'
                }
            ];
            this.saveAddressesToStorage();
        }
    },
    beforeUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        onClickSearch() {
            // 跳转到搜索页面
            this.$router.push('/search');
        },
        handleScroll() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            this.isFixed = scrollTop > 100;
        },
        changeTab(index) {
            this.currentTabIndex = index;
            this.merchantList = this.tabMerchantLists[index];
        },
        getCurrentLocation() {
            Toast.loading({
                message: '定位中...',
                forbidClick: true
            });
            
            // 模拟定位过程
            setTimeout(() => {
                this.currentLocation = '泸州职业技术学院(东华校区)-4栋';
                Toast.success('重新定位成功');
            }, 1000);
        },
        searchAddress() {
            if (!this.addressKeyword) {
                Toast('请输入地址关键词');
                return;
            }
            
            Toast.loading({
                message: '搜索中...',
                forbidClick: true
            });
            
            const key = 'dc1b95da1da62345aad8e02d991e5d03';

            // 使用模拟数据
            setTimeout(() => {
                this.searchResults = [
                    {
                        name: '泸州职业技术学院(东华校区)',
                        address: '泸州市龙马潭区香林路1号',
                        latitude: 28.8888,
                        longitude: 105.4444
                    },
                    {
                        name: '泸州市中心商城',
                        address: '泸州市江阳区酒城大道三段',
                        latitude: 28.9999,
                        longitude: 105.5555
                    },
                    {
                        name: '泸州西南商贸城',
                        address: '泸州市江阳区龙透关路',
                        latitude: 28.7777,
                        longitude: 105.3333
                    }
                ].filter(item => 
                    item.name.includes(this.addressKeyword) || 
                    item.address.includes(this.addressKeyword)
                );
                
                Toast.clear();
            }, 500);
        },
        selectSearchResult(address) {
            this.currentAddress = {
                ...address,
                isDefault: false
            };
            
            // 检查是否已存在相同地址
            const exists = this.savedAddresses.some(a => a.name === address.name);
            if (!exists) {
                this.savedAddresses.push(this.currentAddress);
                this.saveAddressesToStorage();
            }
            
            this.searchResults = [];
            this.addressKeyword = '';
            this.showAddressSelector = false;
        },
        setCurrentAddress(address) {
            this.currentAddress = address;
            this.showAddressSelector = false;
        },
        goToAddAddress() {
            // 跳转到新增地址页面
            this.$router.push('/add-address');
        },
        onAddressSubmit() {
            // 添加新地址
            const newAddress = {
                ...this.newAddress,
                isDefault: this.savedAddresses.length === 0 // 如果是第一个地址，设为默认
            };
            
            this.savedAddresses.unshift(newAddress); // 添加到地址列表开头
            this.saveAddressesToStorage();
            
            // 设置为当前地址
            this.currentAddress = newAddress;
            
            // 关闭弹窗
            this.showAddAddressForm = false;
            
            // 重置表单
            this.newAddress = {
                name: '',
                detail: '',
                tag: '',
                contact: '',
                gender: '先生',
                phone: ''
            };
            
            // 显示成功提示
            Toast.success('添加地址成功');
            
            // 关闭地址选择器
            this.showAddressSelector = false;
        },
        saveAddressesToStorage() {
            localStorage.setItem('savedAddresses', JSON.stringify(this.savedAddresses));
        },
        loadAddressesFromStorage() {
            const addresses = localStorage.getItem('savedAddresses');
            if (addresses) {
                this.savedAddresses = JSON.parse(addresses);
                if (this.savedAddresses.length > 0) {
                    const defaultAddress = this.savedAddresses.find(a => a.isDefault) || this.savedAddresses[0];
                    this.currentAddress = defaultAddress;
                }
            }
        },
        showMapPicker() {
            this.showMapPicker = true;
        },
        closeMapPicker() {
            this.showMapPicker = false;
            this.showAddressSelector = false;
        },
        goToProductDetail(item) {
            // 使用router导航到产品详情页，并传递产品ID
            const productId = item.id || '1'; // 如果没有ID，使用默认值1
            this.$router.push(`/product/${productId}`);
        },
        goToMessage() {
            // 实现跳转到消息页面的逻辑
            this.$router.push('/message');
        },
        showMoreAddresses() {
            // 这里可以加载更多地址或者展开已有的地址
            this.hasMoreAddresses = false;
            Toast('已显示全部地址');
        },
        deleteAddress(index) {
            Dialog.confirm({
                title: '提示',
                message: '确定要删除此地址吗？',
            })
            .then(() => {
                // 如果当前选中的地址被删除，需要更新currentAddress
                if (this.currentAddress && this.currentAddress.name === this.savedAddresses[index].name) {
                    this.currentAddress = this.savedAddresses.length > 1 ? this.savedAddresses[0] : null;
                }
                
                // 删除地址
                this.savedAddresses.splice(index, 1);
                this.saveAddressesToStorage();
                Toast.success('删除成功');
            });
        },
        getAddressLocation() {
            Toast.loading({
                message: '定位中...',
                forbidClick: true
            });
            
            // 模拟定位获取地址过程
            setTimeout(() => {
                this.newAddress.name = '泸州职业技术学院(东华校区)-4栋';
                Toast.success('定位成功');
            }, 1000);
        },
        testShowAddressForm() {
            this.showAddAddressForm = true;
            console.log('Opening address form popup, showAddAddressForm =', this.showAddAddressForm);
        }
    }
}
</script>

<style lang="less" scoped>
.home{
    display: flex;
    flex-flow: column;
    height: 100%;
    background-color: #ffe74c;
    
    .content{
        flex: 1;
        overflow-y: auto;
    }

    .header {
        width: 750px;
        max-width: 100%;
        height: 80px;
        background-color: #ffe74c;
        display: flex;
        align-items: center;
        padding: 0;
        box-sizing: border-box;

        .header-inner {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 12px;
        }

        .location-container {
            display: flex;
            align-items: center;
            width: 336px;
            height: 36px;
            position: relative;
            padding-left: 16px;

            .location-icon {
                width: 15px;
                height: 25px;
                font-size: 25px;
                color: #000;
                flex-shrink: 0;
                margin-right: 8px;
                z-index: 1;
                font-weight: bold;
            }

            .location-text {
                font-size: 30px;
                font-weight: bold;
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                color: #000;
                margin-left: 10px;
            }

            .arrow-icon {
                width: 15px;
                height: 25px;
                font-size: 25px;
                color: #000;
                flex-shrink: 0;
                margin-left: 4px;
                z-index: 1;
            }
        }

        .right {
            .icon {
                width: 44px;
                height: 44px;
                cursor: pointer;
                transition: transform 0.2s;
                
                &:active {
                    transform: scale(0.95);
                }
            }
        }

    }

    .search-box-container {
        position: sticky;
        top: 0;
        z-index: 100;
        background-color: #ffe74c;
        width: 100%;
    }

    .search-box {
        padding: 10px 24px 10px;
        background-color: #ffe74c;
    
        :deep(.van-search) {
            padding: 0;
            height: 68px;
            width: 702px;
            margin: 0 auto;
        }
        
        :deep(.van-search__content) {
            background-color: #fff;
            border-radius: 34px;
            height: 68px;
            padding: 0;
            display: flex;
            align-items: center;
        }

        :deep(.van-field) {
            height: 68px;
            display: flex;
            align-items: center;
        }

        :deep(.van-field__left-icon) {
            margin-left: 26px;
            margin-right: 16px;
            font-size: 28px;
            
            .van-icon {
                width: 28px;
                height: 28px;
                font-size: 28px;
                font-weight: bold;
            }
        }

        :deep(.van-field__control) {
            color: #797a7c;
            font-size: 28px;
        }

        :deep(.van-field__right-icon) {
            height: 68px;
            display: flex;
            align-items: center;
        }

        .search-button {
            padding: 0;
            background-color: #fee543;
            color: #000;
            height: 60px;
            width: 112px;
            line-height: 60px;
            border-radius: 30px;
            font-size: 28px;
            font-weight: normal;
            text-align: center;
        }
    }

    .content-container {
        background-color: #f7f7f7;
        border-top-left-radius: 40px;
        border-top-right-radius: 40px;
        overflow: hidden;
        padding-top: 15px;
    }

    .category-wrapper {
        padding: 10px 0;
        background-color: #f7f7f7;
        margin-bottom: 10px;
    }

    .category-swipe {
        height: 350px;  /* 调整高度以适应两行图标 */

        :deep(.van-swipe__indicators) {
            bottom: 10px;
        }

        :deep(.van-swipe__indicator) {
            width: 10px;
            height: 10px;
            background-color: #ddd;
            opacity: 1;
            margin: 0 6px;
        }

        :deep(.van-swipe__indicator--active) {
            background-color: #ffe74c;
        }
    }

    .category-icons {
        display: flex;
        flex-wrap: wrap;
        background-color: #f7f7f7;
        padding: 15px 0;
        .category-item {
            width: 20%;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;

            &.first-row {
                .icon-wrapper {
                    width: 112px;
                    height: 94px;
                    border-radius: 20px;

                    .icon {
                        width: 50px;
                        height: 50px;
                    }
                }
            }

            .icon-wrapper {
                width: 79px;
                height: 61px;
                border-radius: 15px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 10px;

                .icon {
                    width: 35px;
                    height: 35px;
                    color: #333;
                }
            }

            span {
                font-size: 24px;
                color: #333;
                margin-top: 5px;
                line-height: 1.2;
            }
        }
    }

    .nearby-section {
        background-color: #fff;
        margin: 0 20px 15px;
        width: 710px;
        height: 405px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        max-width: calc(100% - 40px);

        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 70px;
            padding: 0 20px;
            position: relative;
            
            &::after {
                content: '';
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 1px;
                background-color: #f5f5f5;
            }

            .title-box {
                display: flex;
                align-items: center;
                position: relative;

                .icon {
                    width: 32px;
                    height: 32px;
                    margin-right: 8px;
                    color: #333;
                }

                .title-text {
                    font-size: 32px;
                    font-weight: bold;
                    color: #333;
                    margin-right: 10px;
                }
                
                .subtitle {
                    font-size: 25px;
                    color: #c05a18;
                    font-weight: normal;
                    position: relative;
                    padding-left: 15px;
                    
                    &::before {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 2px;
                        height: 20px;
                        background-color: #e0e0e0;
                    }
                }
            }

            .more {
                font-size: 24px;
                color: #666;
                display: flex;
                align-items: center;
                
                .arrow {
                    margin-left: 4px;
                    color: #999;
                }
            }
        }

        .food-list {
            display: flex;
            flex-wrap: wrap;
            padding: 15px 10px 5px;
            height: calc(100% - 70px);
            box-sizing: border-box;

            .food-item {
                width: 50%;
                padding: 5px 10px 20px;
                box-sizing: border-box;
                height: 50%;
                display: flex;

                .food-img {
                    width: 130px;
                    height: 130px;
                    border-radius: 6px;
                    overflow: hidden;
                    flex-shrink: 0;
                    
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .food-info {
                    flex: 1;
                    padding-left: 15px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 130px;
                    padding-top: 5px;
                    padding-bottom: 5px;
                    box-sizing: border-box;

                    .restaurant-name {
                        font-size: 24px;
                        color: #1a1a1a;
                        font-weight: bold;
                        margin-bottom: 2px;
                        line-height: 1.2;
                    }

                    .name {
                        font-size: 20px;
                        color: #666;
                        margin-bottom: 10px;
                        line-height: 1.2;
                    }

                    .price-row {
                        display: flex;
                        flex-direction: column;
                    }

                    .discount-tag {
                        display: inline-block;
                        font-size: 18px;
                        color: #ff3b3b;
                        line-height: 1.2;
                        margin-bottom: 8px;
                        font-weight: 500;
                    }

                    .price {
                        display: flex;
                        align-items: baseline;

                        .current {
                            font-size: 30px;
                            color: #ff3b3b;
                            font-weight: bold;
                            line-height: 1;
                        }

                        .original {
                            font-size: 20px;
                            color: #999;
                            text-decoration: line-through;
                            margin-left: 8px;
                            line-height: 1;
                        }
                    }
                }
            }
        }
    }

    .tabs-container {
        margin: 0 20px 15px;
        height: 64px;
    }

    .tabs {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #f7f7f7;
        border-radius: 10px;
        height: 64px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        padding: 0 10px;

        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 170px;
            height: 60px;
            padding: 5px 0;
            position: relative;

            &.active::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 50px;
                height: 3px;
                background-color: #ff6633;
                border-radius: 2px;
            }

            .tab-icon {
                height: 24px;
                margin-bottom: 4px;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                    height: 100%;
                }
            }

            .tab-text {
                font-size: 16px;
                color: #333;
                line-height: 1;
                font-size: 26px;
            }

            &.active .tab-text {
                color: #ff6633;
                font-weight: bold;
            }
        }
    }

    .merchant-list {
        margin: 0 20px 15px;
        width: 710px;
        background-color: #f5f5f5;
        border-radius: 25px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        max-width: calc(100% - 40px);
        padding: 0;

        .merchant-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            height: auto;
            min-height: 190px;
            box-sizing: border-box;
            border-bottom: 1px solid #ffffff;
            position: relative;
            margin-bottom: 15px;
            border-radius: 15px;
            background-color: #ffffff;
            &:nth-last-child(1) {
                border-bottom: none;
            }

            .quality-label {
                position: absolute;
                top: 10px;
                right: 10px;
                padding: 2px 8px;
                background: linear-gradient(90deg, #ffd26b, #ffaa33);
                color: #fff;
                font-size: 14px;
                border-radius: 10px;
                font-weight: bold;
                z-index: 1;
            }

            .merchant-img {
                width: 180px;
                height: 180px;
                border-radius: 15px;
                overflow: hidden;
                flex-shrink: 0;
                position: relative;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }

                .live-tag {
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    padding: 2px 8px;
                    background-color: rgba(0, 0, 0, 0.5);
                    color: #fff;
                    font-size: 14px;
                    border-radius: 10px;
                }
            }

            .merchant-info {
                flex: 1;
                padding-left: 12px;
                display: flex;
                flex-direction: column;
                min-height: 180px;
                padding-top: 2px;
                padding-bottom: 2px;
                box-sizing: border-box;
                position: relative;
                overflow: hidden;

                .merchant-name {
                    font-size: 28px;
                    color: #1a1a1a;
                    font-weight: bold;
                    margin-bottom: 5px;
                    line-height: 1.2;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .merchant-badge {
                    position: absolute;
                    top: 5px;
                    right: 10px;
                    width: 25px;
                    height: 25px;
                    background-color: #ffd166;
                    border-radius: 50%;
                }

                .merchant-rating-row {
                    display: flex;
                    align-items: center;
                    margin-bottom: 5px;
                    font-size: 16px;
                    color: #666;
                    
                    .rating {
                        font-weight: bold;
                        color: #ff6633;
                        margin-right: 15px;
                    }
                    
                    .sales {
                        margin-right: 15px;
                    }
                    
                    .price {
                        margin-right: 15px;
                    }
                }

                .delivery-info {
                    margin-bottom: 5px;
                    font-size: 16px;
                    color: #666;
                    display: flex;
                    flex-wrap: wrap;
                    position: relative;
                    width: 100%;
                    
                    span {
                        margin-right: 15px;
                        margin-bottom: 2px;
                    }

                    .right-info {
                        position: absolute;
                        right: 0;
                        color: #999;
                        &:nth-last-child(1) {
                            right: 0;
                        }
                        &:nth-last-child(2) {
                            right: 90px;
                        }
                    }
                    
                    .delivery-tag {
                        display: inline-block;
                        padding: 3px 8px;
                        background-color: #f5f5f5;
                        color: #666;
                        font-size: 16px;
                        border-radius: 15px;
                    }
                }

                .tags-row {
                    display: flex;
                    flex-wrap: wrap;
                    margin-bottom: 5px;
                    font-size: 16px;
                    color: #666;
                    align-items: center;

                    .tag {
                        padding: 3px 8px;
                        background-color: rgba(255, 102, 51, 0.1);
                        color: #ff6633;
                        font-size: 16px;
                        border-radius: 15px;
                        margin-right: 5px;
                        margin-bottom: 2px;
                        
                        &.special-tag {
                            background-color: rgba(255, 245, 239, 1);
                            color: #ff6633;
                            border: 1px solid rgba(255, 102, 51, 0.3);
                        }
                    }

                    .rank-tag {
                        font-size: 16px;
                        color: #ff6633;
                        margin-left: 5px;
                    }
                }

                .promotion-row {
                    position: absolute;
                    bottom: 0;
                    left: 15px;
                    display: flex;
                    align-items: center;
                    
                    .promotion-icon {
                        display: inline-block;
                        padding: 3px 8px;
                        background: linear-gradient(90deg, #ff9c6e, #ff6633);
                        color: #fff;
                        font-size: 16px;
                        border-radius: 15px;
                        margin-right: 5px;
                    }
                    
                    .promotion-text {
                        font-size: 16px;
                        color: #666;
                    }
                }
            }
        }
    }

    .nearby-mall {
        background-color: #fff;
        margin: 0 20px 15px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);

        .mall-header {
            display: flex;
            align-items: center;
            padding: 15px;
            
            .tag-container {
                margin-right: 8px;
            }

            .new-tag {
                display: inline-block;
                padding: 2px 6px;
                background-color: #ff6633;
                color: #fff;
                font-size: 14px;
                border-radius: 3px;
            }

            .mall-title {
                font-size: 20px;
                font-weight: bold;
                color: #333;
            }
        }

        .mall-content {
            .mall-img {
                width: 100%;
                height: 150px;
                overflow: hidden;
                
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .mall-info {
                padding: 15px;

                .rating-row {
                    display: flex;
                    margin-bottom: 8px;
                    font-size: 14px;
                    color: #666;
                    
                    .rating {
                        font-weight: bold;
                        margin-right: 15px;
                    }
                    
                    .sales {
                        margin-right: 15px;
                    }
                    
                    .delivery-time {
                        margin-right: 15px;
                    }
                }

                .delivery-info {
                    margin-bottom: 10px;
                    
                    .delivery-tag {
                        display: inline-block;
                        padding: 3px 8px;
                        background-color: #f5f5f5;
                        color: #666;
                        font-size: 14px;
                        border-radius: 15px;
                    }
                }

                .promotion {
                    .promotion-item {
                        display: flex;
                        align-items: center;
                        margin-bottom: 6px;
                        
                        .user-avatar {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            width: 20px;
                            height: 20px;
                            background-color: #ff9c6e;
                            color: #fff;
                            border-radius: 50%;
                            font-size: 14px;
                            margin-right: 5px;
                        }
                        
                        .promotion-text {
                            font-size: 14px;
                            color: #666;
                        }
                    }
                }
            }
        }
    }

    .promotion-banner {
        position: relative;
        height: 60px;
        background-color: #ff6633;
        overflow: hidden;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        padding: 0 15px;
        
        img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .banner-text {
            font-size: 18px;
            color: #fff;
            font-weight: bold;
            position: relative;
            z-index: 1;
            flex: 1;
        }

        .banner-button {
            padding: 5px 10px;
            background-color: #FFD429;
            color: #f33;
            font-size: 14px;
            border-radius: 15px;
            position: relative;
            z-index: 1;
        }
    }

    .address-selector {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        background-color: #f8f8f8;

        .address-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 20px;
            background-color: #fff;
            border-bottom: 1px solid #f0f0f0;
            position: sticky;
            top: 0;
            z-index: 10;

            .title {
                font-size: 22px;
                font-weight: 500;
                color: #333;
            }
            
            .add-address {
                font-size: 25px;
                color: #ff6633;
            }
        }

        .location-search-bar {
            display: flex;
            background-color: #f8f8f8;
            padding: 15px 20px;
            border-radius: 8px;
            margin: 15px 15px;
            
            .city-selector {
                display: flex;
                align-items: center;
                padding-right: 15px;
                margin-right: 15px;
                border-right: 1px solid #e0e0e0;
                
                span {
                    margin: 0 5px;
                    font-size: 18px;
                    font-weight: 500;
                }
                
                .location-icon {
                    color: #333;
                    font-size: 20px;
                }
            }
            
            .search-input {
                flex: 1;
                
                :deep(.van-search) {
                    padding: 0;
                }
                
                :deep(.van-search__content) {
                    background-color: transparent;
                    border: none;
                    padding: 0;
                }
                
                :deep(.van-cell) {
                    padding: 0;
                    background-color: transparent;
                }
                
                :deep(.van-field__control) {
                    font-size: 16px;
                }
            }
        }

        .current-location-address {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 20px;
            background-color: #fff;
            margin: 0;
            border-bottom: 1px solid #f0f0f0;
            
            .address-text {
                font-size: 20px;
                color: #333;
                font-weight: 500;
            }
            
            .relocate-btn {
                display: flex;
                align-items: center;
                padding: 6px 12px;
                background-color: #ff8c19;
                color: #fff;
                border-radius: 20px;
                font-size: 16px;
                
                .van-icon {
                    margin-right: 4px;
                    font-size: 18px;
                }
            }
        }

        .my-addresses-section, .nearby-addresses-section {
            padding: 0;
            margin-bottom: 0;
            background-color: #fff;
            
            .section-title {
                display: flex;
                align-items: center;
                padding: 20px 20px;
                border-bottom: 1px solid #f0f0f0;
                font-size: 20px;
                color: #666;
                
                .van-icon {
                    margin-right: 10px;
                    font-size: 22px;
                }
            }
            
            .address-list {
                padding: 0;
                
                .address-item {
                    padding: 24px 20px;
                    border-bottom: 1px solid #f0f0f0;
                    display: flex;
                    justify-content: space-between;
                    
                    .address-content {
                        flex: 1;
                    }
                    
                    .address-actions {
                        display: flex;
                        align-items: center;
                        
                        .delete-btn {
                            padding: 8px 12px;
                            
                            .van-icon {
                                font-size: 24px;
                                color: #999;
                            }
                        }
                    }
                    
                    .address-tag {
                        display: inline-block;
                        padding: 3px 10px;
                        background-color: #f0f7e8;
                        border-radius: 6px;
                        color: #7cb147;
                        font-size: 16px;
                        margin-bottom: 12px;
                        width: fit-content;
                    }
                    
                    .address-name {
                        font-size: 22px;
                        color: #333;
                        font-weight: 400;
                        margin-bottom: 12px;
                        line-height: 1.4;
                    }
                    
                    .address-user {
                        font-size: 18px;
                        color: #999;
                        
                        .user-phone {
                            margin-left: 20px;
                        }
                    }
                }
                
                .show-more-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 24px 0;
                    color: #666;
                    font-size: 18px;
                    
                    .van-icon {
                        margin-left: 8px;
                        font-size: 20px;
                    }
                }
            }
        }
        

    }
}
</style>